<template>
  <div class="dashboard">
    <el-row :gutter="20">
      <!-- 左侧边栏 -->
      <el-col :xs="24" :md="6">
        <!-- 用户加入天数统计 -->
        <el-card class="user-days-card" shadow="hover">
          <div class="days-content">
            <div class="days-left">
              <div class="days-icon-wrapper">
                <el-icon class="days-icon"><Timer /></el-icon>
              </div>
            </div>
            <div class="days-right">
              <div class="days-label">加入天数</div>
              <div class="days-number">
                <span class="animated-number">{{ displayDays }}</span>
                <span class="days-unit">天</span>
              </div>
              <div class="days-date">
                <el-icon class="date-icon"><Clock /></el-icon>
                <span>{{ formatDate(userCreateTime) }}</span>
              </div>
            </div>
          </div>
        </el-card>

        <!-- 快捷操作 -->
        <el-card class="quick-actions-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <el-icon class="header-icon"><Star /></el-icon>
              <span>快捷操作</span>
            </div>
          </template>
          <div class="quick-actions-list">
            <div class="quick-action-item" @click="$router.push('/user/rescue')">
              <el-icon class="action-icon"><Plus /></el-icon>
              <span>上报救助</span>
            </div>
            <div class="quick-action-item" @click="$router.push('/user/animals')">
              <el-icon class="action-icon"><Files /></el-icon>
              <span>浏览动物</span>
            </div>
            <div class="quick-action-item" @click="$router.push('/user/adoption')">
              <el-icon class="action-icon"><Document /></el-icon>
              <span>领养申请</span>
            </div>
            <div class="quick-action-item" @click="$router.push('/user/profile')">
              <el-icon class="action-icon"><User /></el-icon>
              <span>个人中心</span>
            </div>
          </div>
        </el-card>

        <!-- 我的贡献统计 -->
        <el-card class="stats-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <el-icon class="header-icon"><TrendCharts /></el-icon>
              <span>我的贡献</span>
            </div>
          </template>
          <div class="stats-list">
            <div class="stat-item">
              <div class="stat-icon rescue">
                <el-icon><Plus /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-value">{{ rescueCount }}</div>
                <div class="stat-label">救助记录</div>
              </div>
            </div>
            <div class="stat-item">
              <div class="stat-icon adoption">
                <el-icon><Document /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-value">{{ adoptionCount }}</div>
                <div class="stat-label">领养申请</div>
              </div>
            </div>
          </div>
        </el-card>

        <!-- 历史公告（紧凑版） -->
        <el-card class="announcement-card-compact" shadow="hover">
          <template #header>
            <div class="card-header">
              <el-icon class="header-icon"><Bell /></el-icon>
              <span>公告</span>
              <el-tag size="small" type="warning" effect="plain" class="header-badge">{{ announcements.length }}</el-tag>
            </div>
          </template>
          <div class="announcement-list-compact" v-loading="announcementLoading">
            <div 
              class="announcement-item-compact" 
              v-for="announcement in announcements.slice(0, 5)" 
              :key="announcement.id"
              @click="showAnnouncementDialog(announcement)"
            >
              <div class="announcement-icon-small">
                <el-icon><Bell /></el-icon>
              </div>
              <div class="announcement-info">
                <div class="announcement-title-small">{{ announcement.title }}</div>
                <div class="announcement-time-small">
                  <el-icon><Clock /></el-icon>
                  <span>{{ formatShortTime(announcement.publishTime) }}</span>
                </div>
              </div>
              <el-tag 
                size="small" 
                :type="getPriorityType(announcement.priority)"
                effect="plain"
              >
                {{ getPriorityText(announcement.priority) }}
              </el-tag>
            </div>
            <el-empty v-if="!announcementLoading && announcements.length === 0" description="暂无公告" :image-size="80" />
          </div>
        </el-card>

        <!-- 日历 -->
        <el-card class="calendar-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <el-icon class="header-icon"><Calendar /></el-icon>
              <span>日历</span>
            </div>
          </template>
          <div class="calendar-container">
            <el-calendar v-model="calendarDate">
              <template #date-cell="{ data }">
                <div class="calendar-date">
                  <span :class="{ 'is-today': data.isCurrentMonth && isToday(data.day) }">
                    {{ data.day.split('-')[2] }}
                  </span>
                </div>
              </template>
            </el-calendar>
          </div>
        </el-card>
      </el-col>

      <!-- 右侧主内容区 -->
      <el-col :xs="24" :md="18">
        <!-- 欢迎横幅 -->
        <div class="hero-section">
          <div class="hero-content">
            <h1 class="hero-title">
              <el-icon class="title-icon"><StarFilled /></el-icon>
              关爱流浪动物
            </h1>
            <p class="hero-subtitle">用爱心为它们创造一个温暖的家</p>
          </div>
        </div>

        <!-- 轮播图 -->
        <el-card class="banner-card" shadow="hover">
          <el-carousel :interval="4000" height="300px" indicator-position="outside">
            <el-carousel-item v-for="item in bannerList" :key="item.id">
              <div class="banner-item" @click="handleBannerClick(item)">
                <img :src="item.image" :alt="item.title" class="banner-image" />
                <div class="banner-overlay">
                  <div class="banner-content">
                    <h2>{{ item.title }}</h2>
                    <p>{{ item.subtitle }}</p>
                  </div>
                </div>
              </div>
            </el-carousel-item>
          </el-carousel>
        </el-card>

        <!-- 企业文化 -->
        <div class="culture-section">
          <h3 class="section-title">
            <el-icon><Star /></el-icon>
            企业文化
          </h3>
          <el-row :gutter="16">
            <el-col :xs="24" :sm="8" v-for="(item, index) in cultureItems" :key="index">
              <el-card class="culture-card" shadow="hover">
                <div class="culture-icon">
                  <el-icon :size="32"><component :is="iconMap[item.icon]" /></el-icon>
                </div>
                <h4>{{ item.title }}</h4>
                <p>{{ item.content }}</p>
              </el-card>
            </el-col>
          </el-row>
        </div>

        <!-- 最新动态 -->
        <el-card class="news-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <el-icon class="header-icon"><Message /></el-icon>
              <span>最新动态</span>
              <el-tag size="small" type="danger" effect="plain" class="header-badge">{{ newsList.length }}条</el-tag>
            </div>
          </template>
          <div class="news-list" v-loading="newsLoading">
            <div 
              class="news-item" 
              v-for="news in newsList" 
              :key="news.id"
              @click="handleNewsClick(news)"
            >
              <div class="news-image" v-if="news.coverImage">
                <img :src="news.coverImage" :alt="news.title" />
                <div class="news-badge" v-if="news.isTop === 1">
                  <el-tag type="danger" size="small" effect="dark">置顶</el-tag>
                </div>
              </div>
              <div class="news-content">
                <div class="news-header">
                  <h4>{{ news.title }}</h4>
                  <el-tag size="small" type="primary">{{ news.categoryName || '资讯' }}</el-tag>
                </div>
                <p>{{ news.summary || news.content?.substring(0, 100) || '暂无摘要' }}</p>
                <div class="news-footer">
                  <div class="footer-left">
                    <el-icon class="time-icon"><Clock /></el-icon>
                    <span class="news-time">{{ formatNewsTime(news.publishTime) }}</span>
                  </div>
                  <div class="footer-right">
                    <el-icon><View /></el-icon>
                    <span>{{ news.views || 0 }}</span>
                  </div>
                </div>
              </div>
            </div>
            <el-empty v-if="!newsLoading && newsList.length === 0" description="暂无动态" :image-size="120" />
          </div>
        </el-card>

        <!-- 服务介绍 -->
        <div class="service-section">
          <h3 class="section-title">
            <el-icon><Star /></el-icon>
            我们的服务
          </h3>
          <el-row :gutter="16">
            <el-col :xs="24" :sm="8" v-for="(service, index) in services" :key="index">
              <el-card class="service-card" shadow="hover">
                <div class="service-icon">
                  <el-icon :size="32"><component :is="iconMap[service.icon]" /></el-icon>
                </div>
                <h4>{{ service.title }}</h4>
                <p>{{ service.desc }}</p>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>

    <!-- 公告详情对话框 -->
    <el-dialog
      v-model="announcementDialogVisible"
      :title="currentAnnouncement?.title || '公告详情'"
      width="750px"
      :close-on-click-modal="true"
      :close-on-press-escape="true"
      :destroy-on-close="true"
      :modal="true"
      :append-to-body="true"
      class="announcement-dialog"
    >
      <template v-if="currentAnnouncement">
        <div class="announcement-dialog-content">
          <div class="dialog-meta">
            <el-tag 
              :type="getPriorityType(currentAnnouncement.priority)" 
              size="large"
              effect="dark"
            >
              {{ getPriorityText(currentAnnouncement.priority) }}
            </el-tag>
            <div class="dialog-meta-item">
              <el-icon><Clock /></el-icon>
              <span>{{ formatNewsTime(currentAnnouncement.publishTime) }}</span>
            </div>
          </div>
          
          <div class="dialog-content-wrapper">
            <div class="dialog-content">
              {{ currentAnnouncement.content }}
            </div>
          </div>
        </div>
      </template>
      <div v-else class="dialog-loading">
        <el-empty description="加载中..." :image-size="80" />
      </div>
      
      <template #footer>
        <div class="dialog-footer-actions">
          <el-button type="primary" size="large" @click="announcementDialogVisible = false">
            <el-icon><Check /></el-icon>
            我知道了
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { 
  Document, Plus, Files, User, Message, Clock, Calendar, Star,
  CircleCheck, Lock, SuccessFilled, Timer, StarFilled, TrendCharts, Bell, View, Check
} from '@element-plus/icons-vue';
import axios from 'axios';
import { ElMessage } from 'element-plus';

export default {
  name: 'Dashboard',
  components: {
    Document,
    Plus,
    Files,
    User,
    Message,
    Clock,
    Calendar,
    Star,
    CircleCheck,
    Lock,
    SuccessFilled,
    Timer,
    StarFilled,
    TrendCharts,
    Bell,
    View,
    Check
  },
  computed: {
    iconMap() {
      return {
        Heart: SuccessFilled,
        Handshake: CircleCheck,
        Shield: Lock,
        Plus,
        Files,
        Document
      };
    }
  },
  data() {
    return {
      calendarDate: new Date(),
      userCreateTime: null,
      actualDays: 0,
      displayDays: 0,
      rescueCount: 0,
      adoptionCount: 0,
      newsLoading: false,
      announcementLoading: false,
      newsList: [],
      announcements: [],
      announcementDialogVisible: false,
      currentAnnouncement: null,
      cultureItems: [
        {
          icon: 'Heart',
          title: '爱心救助',
          content: '我们致力于为每一只流浪动物提供及时的医疗救助和温暖的生活环境，让它们重新获得健康和希望。'
        },
        {
          icon: 'Handshake',
          title: '公益领养',
          content: '通过严格的审核流程，为流浪动物匹配最适合的领养家庭，让它们拥有一个真正的家。'
        },
        {
          icon: 'Shield',
          title: '专业保障',
          content: '专业的医疗团队和丰富的救助经验，确保每只动物都得到最好的照顾和专业的服务。'
        }
      ],
      services: [
        {
          icon: 'Plus',
          title: '动物救助',
          desc: '发现需要帮助的流浪动物，我们提供及时的救助服务'
        },
        {
          icon: 'Files',
          title: '信息查询',
          desc: '查看所有待领养动物的详细信息，找到心仪的伙伴'
        },
        {
          icon: 'Document',
          title: '领养服务',
          desc: '提交领养申请，为流浪动物提供一个温暖的家'
        }
      ],
      bannerList: [
        {
          id: 1,
          title: '关爱流浪动物，从我做起',
          subtitle: '加入我们的救助队伍，给它们一个家',
          image: 'https://images.unsplash.com/photo-1548247416-ec66f4900b2e?w=800&auto=format&fit=crop',
        },
        {
          id: 2,
          title: '领养代替购买',
          subtitle: '给流浪动物一个温暖的家',
          image: 'https://images.unsplash.com/photo-1601758228041-f3b2795255f1?w=800&auto=format&fit=crop',
        },
        {
          id: 3,
          title: '志愿者招募',
          subtitle: '用爱心温暖每一个生命',
          image: 'https://images.unsplash.com/photo-1605211693643-eafce8b0922a?w=800&auto=format&fit=crop',
        }
      ]
    };
  },
  async mounted() {
    await this.loadUserInfo();
    await this.loadStats();
    await this.loadNews();
    await this.loadAnnouncements();
  },
  methods: {
    // 加载用户信息
    async loadUserInfo() {
      try {
        const userId = localStorage.getItem('userId');
        if (!userId) return;
        
        const res = await axios.get(`http://localhost:8080/api/user/${userId}`);
        if (res.data.code === 200 && res.data.data) {
          this.userCreateTime = res.data.data.createTime;
          this.calculateDays();
        }
      } catch (error) {
        console.error('加载用户信息失败:', error);
      }
    },
    
    // 加载统计数据
    async loadStats() {
      try {
        const userId = localStorage.getItem('userId');
        if (!userId) return;
        
        // 加载救助记录数
        try {
          const rescueRes = await axios.get(`http://localhost:8080/api/rescue/user/${userId}`);
          if (rescueRes.data.code === 200 && rescueRes.data.data) {
            this.rescueCount = rescueRes.data.data.length || 0;
          }
        } catch (error) {
          console.error('加载救助记录失败:', error);
        }
        
        // 加载领养申请数
        try {
          const adoptionRes = await axios.get(`http://localhost:8080/api/adoption/user/${userId}`);
          if (adoptionRes.data.code === 200 && adoptionRes.data.data) {
            this.adoptionCount = adoptionRes.data.data.length || 0;
          }
        } catch (error) {
          console.error('加载领养申请失败:', error);
        }
      } catch (error) {
        console.error('加载统计数据失败:', error);
      }
    },
    
    // 计算加入天数
    calculateDays() {
      if (!this.userCreateTime) return;
      
      try {
        // 处理日期格式 "2025-10-26 03:25:37"
        const dateStr = this.userCreateTime.replace(' ', 'T');
        const createTime = new Date(dateStr);
        const now = new Date();
        const diffTime = Math.abs(now - createTime);
        const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
        this.actualDays = diffDays;
        
        // 计算完成后启动动画
        this.$nextTick(() => {
          this.animateNumber();
        });
      } catch (error) {
        console.error('日期计算错误:', error);
        this.actualDays = 0;
        this.displayDays = 0;
      }
    },
    
    // 数字滚动动画
    animateNumber() {
      if (this.actualDays === 0) {
        this.displayDays = 0;
        return;
      }
      
      this.displayDays = 0; // 从0开始
      const duration = 1500; // 动画时长1.5秒
      const steps = 50; // 帧数
      const increment = this.actualDays / steps;
      let current = 0;
      let step = 0;
      
      const timer = setInterval(() => {
        step++;
        current = Math.min(Math.ceil(increment * step), this.actualDays);
        this.displayDays = current;
        
        if (step >= steps || current >= this.actualDays) {
          this.displayDays = this.actualDays;
          clearInterval(timer);
        }
      }, duration / steps);
    },
    
    // 格式化日期
    formatDate(dateStr) {
      if (!dateStr) return '-';
      try {
        const date = new Date(dateStr.replace(' ', 'T'));
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');
        return `${year}-${month}-${day}`;
      } catch (error) {
        return dateStr;
      }
    },
    
    // 判断是否是今天
    isToday(dateStr) {
      const today = new Date();
      const date = new Date(dateStr);
      return date.toDateString() === today.toDateString();
    },
    
    // 加载新闻列表
    async loadNews() {
      this.newsLoading = true;
      try {
        const res = await axios.get('http://localhost:8080/api/news/publicList', {
          params: {
            page: 1,
            size: 6
          }
        });
        if (res.data && res.data.records) {
          this.newsList = res.data.records;
        }
      } catch (error) {
        console.error('加载新闻失败:', error);
        ElMessage.error('加载新闻失败');
      } finally {
        this.newsLoading = false;
      }
    },
    
    // 加载公告列表
    async loadAnnouncements() {
      this.announcementLoading = true;
      try {
        const res = await axios.get('http://localhost:8080/api/announcements/list');
        if (res.data) {
          // 只显示前8条
          this.announcements = Array.isArray(res.data) ? res.data.slice(0, 8) : [];
        }
      } catch (error) {
        console.error('加载公告失败:', error);
        ElMessage.error('加载公告失败');
      } finally {
        this.announcementLoading = false;
      }
    },
    
    // 格式化新闻时间
    formatNewsTime(time) {
      if (!time) return '-';
      try {
        const date = new Date(time.replace(' ', 'T'));
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');
        const hours = String(date.getHours()).padStart(2, '0');
        const minutes = String(date.getMinutes()).padStart(2, '0');
        return `${year}-${month}-${day} ${hours}:${minutes}`;
      } catch (error) {
        return time;
      }
    },
    
    // 获取优先级文本
    getPriorityText(priority) {
      const texts = {
        0: '普通',
        1: '重要',
        2: '紧急'
      };
      return texts[priority] || '普通';
    },
    
    // 获取优先级类型
    getPriorityType(priority) {
      const types = {
        0: 'info',
        1: 'warning',
        2: 'danger'
      };
      return types[priority] || 'info';
    },
    
    handleBannerClick(item) {
      console.log('点击了轮播图：', item.title);
    },
    
    // 点击新闻查看详情
    handleNewsClick(news) {
      if (news.id) {
        // 跳转到新闻详情页或打开对话框
        this.$router.push(`/user/news/${news.id}`);
      }
    },
    
    // 显示公告对话框
    showAnnouncementDialog(announcement) {
      if (!announcement) {
        console.warn('公告数据为空');
        return;
      }
      console.log('显示公告对话框:', announcement);
      this.currentAnnouncement = { ...announcement };
      this.$nextTick(() => {
        this.announcementDialogVisible = true;
        console.log('对话框状态:', this.announcementDialogVisible);
      });
    },
    
    // 格式化短时间
    formatShortTime(time) {
      if (!time) return '-';
      try {
        const date = new Date(time.replace(' ', 'T'));
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');
        return `${month}-${day}`;
      } catch (error) {
        return time;
      }
    }
  }
};
</script>

<style scoped>
.dashboard {
  padding: 0;
}

/* 左侧边栏 - 用户加入天数卡片 */
.user-days-card {
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid #e4e7ed;
  margin-bottom: 20px;
  transition: all 0.3s ease;
}

.user-days-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  border-color: #d0d0d0;
}

.user-days-card :deep(.el-card__body) {
  padding: 24px;
}

.days-content {
  display: flex;
  align-items: center;
  gap: 20px;
}

.days-left {
  flex-shrink: 0;
}

.days-icon-wrapper {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  background: #f5f7fa;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #e4e7ed;
  transition: all 0.3s ease;
}

.user-days-card:hover .days-icon-wrapper {
  background: #e4e7ed;
  border-color: #d0d0d0;
}

.days-icon {
  font-size: 32px;
  color: #606266;
  animation: rotate-slow 8s linear infinite;
}

@keyframes rotate-slow {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.days-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.days-label {
  font-size: 13px;
  color: #909399;
  font-weight: 500;
}

.days-number {
  display: flex;
  align-items: baseline;
  gap: 6px;
  line-height: 1;
}

.animated-number {
  font-size: 36px;
  font-weight: 700;
  color: #303133;
  font-variant-numeric: tabular-nums;
}

.days-unit {
  font-size: 16px;
  color: #606266;
  font-weight: 500;
}

.days-date {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #909399;
}

.date-icon {
  font-size: 14px;
}

/* 快捷操作卡片 */
.quick-actions-card {
  border-radius: 12px;
  margin-bottom: 20px;
  border: 1px solid #e4e7ed;
}

.quick-actions-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.quick-action-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: #fafafa;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid transparent;
}

.quick-action-item:hover {
  background: linear-gradient(90deg, #f0f9ff 0%, #e0f2fe 100%);
  border-color: #409eff;
  transform: translateX(4px);
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.15);
}

.action-icon {
  font-size: 20px;
  color: #606266;
  transition: color 0.3s ease;
}

.quick-action-item:hover .action-icon {
  color: #409eff;
}

.quick-action-item span {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: #303133;
}

/* 统计卡片 */
.stats-card {
  border-radius: 12px;
  margin-bottom: 20px;
  border: 1px solid #e4e7ed;
}

.stats-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: #fafafa;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.stat-item:hover {
  background: #f5f7fa;
  transform: scale(1.02);
}

.stat-icon {
  width: 50px;
  height: 50px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}

.stat-icon.rescue {
  background: linear-gradient(135deg, #ffeaa7 0%, #fdcb6e 100%);
  color: #d63031;
  border: none;
}

.stat-icon.adoption {
  background: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%);
  color: #ffffff;
  border: none;
}

.stat-info {
  flex: 1;
}

.stat-value {
  font-size: 28px;
  font-weight: 700;
  color: #303133;
  line-height: 1;
  margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
}

.stat-label {
  font-size: 13px;
  color: #909399;
}

/* 卡片头部 */
.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.header-icon {
  font-size: 18px;
  color: #606266;
}

.header-badge {
  margin-left: auto;
}

/* 日历卡片 */
.calendar-card {
  border-radius: 12px;
  border: 1px solid #e4e7ed;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.calendar-card:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

.calendar-container {
  padding: 8px 0;
}

.calendar-date {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.calendar-date .is-today {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: #409eff;
  color: white;
  border-radius: 50%;
  font-weight: 600;
}

/* 右侧主内容区 - 欢迎横幅 */
.hero-section {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border-radius: 12px;
  padding: 40px 32px;
  margin-bottom: 20px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid #e4e7ed;
  position: relative;
  overflow: hidden;
}

.hero-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
}

.hero-content {
  max-width: 800px;
  margin: 0 auto;
}

.hero-title {
  margin: 0 0 12px 0;
  font-size: 32px;
  font-weight: 700;
  color: #303133;
  line-height: 1.2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.title-icon {
  font-size: 36px;
  color: #409eff;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
}

.hero-subtitle {
  margin: 0;
  font-size: 16px;
  color: #606266;
  line-height: 1.6;
}

/* 轮播图卡片 */
.banner-card {
  border-radius: 12px;
  margin-bottom: 20px;
  overflow: hidden;
  border: 1px solid #e4e7ed;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.banner-card :deep(.el-card__body) {
  padding: 0;
}

.banner-item {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
  overflow: hidden;
}

.banner-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.banner-item:hover .banner-image {
  transform: scale(1.05);
}

.banner-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
  padding: 40px 32px 32px;
}

.banner-content {
  max-width: 1200px;
  margin: 0 auto;
  color: white;
}

.banner-content h2 {
  margin: 0 0 8px 0;
  font-size: 28px;
  font-weight: 700;
}

.banner-content p {
  margin: 0;
  font-size: 16px;
  opacity: 0.95;
}

/* 区块标题 */
.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px 0;
  font-size: 20px;
  font-weight: 600;
  color: #303133;
}

.section-title .el-icon {
  font-size: 22px;
  color: #409eff;
}

/* 企业文化区域 */
.culture-section {
  margin-bottom: 20px;
}

.culture-card {
  border-radius: 12px;
  text-align: center;
  height: 100%;
  transition: all 0.3s ease;
  border: 1px solid #e4e7ed;
  background: #ffffff;
}

.culture-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 24px rgba(64, 158, 255, 0.2);
  border-color: #409eff;
}

.culture-card :deep(.el-card__body) {
  padding: 28px 20px;
}

.culture-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: #f5f7fa;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #606266;
  border: 2px solid #e4e7ed;
  transition: all 0.3s ease;
}

.culture-card:hover .culture-icon {
  background: #e4e7ed;
  border-color: #409eff;
  color: #409eff;
  transform: rotateY(360deg);
}

.culture-card h4 {
  margin: 0 0 10px 0;
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

.culture-card p {
  margin: 0;
  font-size: 13px;
  color: #606266;
  line-height: 1.8;
}

/* 新闻卡片 */
.news-card {
  border-radius: 12px;
  margin-bottom: 20px;
  border: 1px solid #e4e7ed;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.news-card:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

.news-list {
  max-height: 600px;
  overflow-y: auto;
  overflow-x: hidden;
}

.news-item {
  display: flex;
  padding: 18px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 8px;
  margin-bottom: 10px;
  background: #ffffff;
}

.news-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.news-item:hover {
  background: linear-gradient(90deg, #f0f9ff 0%, #ffffff 100%);
  transform: translateX(6px);
  box-shadow: 0 2px 12px rgba(64, 158, 255, 0.15);
  border-left: 3px solid #409eff;
}

.news-image {
  width: 140px;
  height: 90px;
  flex-shrink: 0;
  margin-right: 18px;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}

.news-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.news-item:hover .news-image img {
  transform: scale(1.1);
}

.news-content {
  flex: 1;
  min-width: 0;
}

.news-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
  gap: 12px;
}

.news-content h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-content p {
  margin: 0 0 10px 0;
  font-size: 13px;
  color: #606266;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: #909399;
}

.footer-left,
.footer-right {
  display: flex;
  align-items: center;
  gap: 4px;
}

.time-icon {
  font-size: 14px;
}

.news-time {
  font-size: 12px;
}

.news-badge {
  position: absolute;
  top: 8px;
  right: 8px;
}

/* 公告卡片（紧凑版） */
.announcement-card-compact {
  border-radius: 12px;
  margin-bottom: 20px;
  border: 1px solid #e4e7ed;
}

.announcement-list-compact {
  max-height: 320px;
  overflow-y: auto;
}

.announcement-item-compact {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-bottom: 1px solid #f5f7fa;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 6px;
  margin-bottom: 6px;
}

.announcement-item-compact:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.announcement-item-compact:hover {
  background: #fff7e6;
  transform: translateX(4px);
}

.announcement-icon-small {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff7e6;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #faad14;
  font-size: 14px;
  border: 1px solid #ffe7ba;
  transition: all 0.3s ease;
}

.announcement-item-compact:hover .announcement-icon-small {
  background: #faad14;
  color: #ffffff;
  transform: rotate(15deg);
}

.announcement-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.announcement-title-small {
  font-size: 13px;
  font-weight: 500;
  color: #303133;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.announcement-time-small {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #909399;
}

.announcement-time-small .el-icon {
  font-size: 12px;
}

/* 公告对话框样式 */
.announcement-dialog-content {
  padding: 12px 0;
}

.dialog-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 2px solid #ebeef5;
}

.dialog-meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #909399;
}

.dialog-meta-item .el-icon {
  font-size: 15px;
}

.dialog-content-wrapper {
  margin-top: 20px;
}

.dialog-content {
  font-size: 16px;
  line-height: 2;
  color: #303133;
  white-space: pre-wrap;
  word-wrap: break-word;
  padding: 30px;
  background: linear-gradient(135deg, #fafafa 0%, #f5f7fa 100%);
  border-radius: 12px;
  min-height: 200px;
  border: 1px solid #e4e7ed;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.04);
}

.dialog-loading {
  padding: 40px 0;
}

.dialog-footer-actions {
  display: flex;
  justify-content: center;
  padding-top: 10px;
}

/* 确保对话框正确显示 */
.announcement-dialog :deep(.el-dialog) {
  border-radius: 16px;
  overflow: hidden;
}

.announcement-dialog :deep(.el-dialog__header) {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #ffffff;
  padding: 24px 30px;
  margin: 0;
}

.announcement-dialog :deep(.el-dialog__title) {
  color: #ffffff;
  font-size: 20px;
  font-weight: 600;
}

.announcement-dialog :deep(.el-dialog__headerbtn .el-dialog__close) {
  color: #ffffff;
  font-size: 22px;
}

.announcement-dialog :deep(.el-dialog__headerbtn .el-dialog__close:hover) {
  color: rgba(255, 255, 255, 0.8);
}

.announcement-dialog :deep(.el-dialog__body) {
  padding: 30px;
}

.announcement-dialog :deep(.el-dialog__footer) {
  padding: 20px 30px 30px;
  border-top: 1px solid #e4e7ed;
}

/* 服务区域 */
.service-section {
  margin-bottom: 20px;
}

.service-card {
  border-radius: 12px;
  text-align: center;
  height: 100%;
  transition: all 0.3s ease;
  border: 1px solid #e4e7ed;
  background: #ffffff;
}

.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 20px rgba(64, 158, 255, 0.2);
  border-color: #409eff;
}

.service-card :deep(.el-card__body) {
  padding: 24px 20px;
}

.service-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  border-radius: 12px;
  background: #f5f7fa;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #606266;
  border: 2px solid #e4e7ed;
  transition: all 0.3s ease;
}

.service-card:hover .service-icon {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-color: #667eea;
  color: #ffffff;
  transform: rotateY(360deg);
}

.service-card h4 {
  margin: 0 0 8px 0;
  font-size: 17px;
  font-weight: 600;
  color: #303133;
}

.service-card p {
  margin: 0;
  font-size: 13px;
  color: #606266;
  line-height: 1.6;
}

/* 响应式 */
@media (max-width: 992px) {
  .hero-title {
    font-size: 28px;
  }
  
  .title-icon {
    font-size: 32px;
  }
  
  .hero-subtitle {
    font-size: 14px;
  }
  
  .news-item {
    flex-direction: column;
  }
  
  .news-image {
    width: 100%;
    height: 160px;
    margin-right: 0;
    margin-bottom: 12px;
  }
  
  .banner-content h2 {
    font-size: 24px;
  }
  
  .banner-content p {
    font-size: 14px;
  }
}

@media (max-width: 768px) {
  .hero-section {
    padding: 32px 24px;
  }
  
  .hero-title {
    font-size: 24px;
  }
  
  .culture-card :deep(.el-card__body) {
    padding: 20px 16px;
  }
  
  .banner-overlay {
    padding: 24px 20px 20px;
  }
  
  .animated-number {
    font-size: 48px;
  }
  
  .days-icon-large {
    font-size: 36px;
  }
}
</style>

